
<template>
  <div id="app">
    <header v-if="$route.meta.showHeader" >
      <div class="header-container">
        <img src="@/assets/icons/logo.png" class="logo" />
        <nav class="navigation">
          <RouterLink to="/" class="nav-link">首页</RouterLink>
          <RouterLink to="/search" class="nav-link">导师检索</RouterLink>
          <!-- <RouterLink to="/" class="nav-link">导师评价</RouterLink> -->
          <RouterLink to="/recommand" class="nav-link">推荐大厅</RouterLink>
          <RouterLink to="/myspace" class="nav-link">个人中心</RouterLink>
        </nav>
        <div v-if="loginStatus" class="flex-row" >
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="margin-right: 10px;" @click.native="$router.push('/myspace')"></el-avatar>
          <el-button type="danger" plain size="small"  @click="exitLogin">退出登录</el-button>
        </div>
        <el-button-group v-else>
          <el-button round @click="$router.push('/login')">登录</el-button>
          <el-button style="background-color: black;color: white;" round @click="$router.push('/register')">注册</el-button>
        </el-button-group>
      </div>
    </header>

    <router-view  />
  </div>
</template>
<script>
import { Message } from 'element-ui';
export default {
  computed: {  
    loginStatus(){
      return sessionStorage.getItem("loginCookie") ? true:false;
    }
  },
  methods: {
    exitLogin() {
      sessionStorage.removeItem("userInfo");
      sessionStorage.removeItem("loginStatus");
      sessionStorage.removeItem("loginCookie");
      this.$router.push("/login");
      Message.info("已经退出登录！");
    },
  },  
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
}


.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 30px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  width: 8vw;
}

.navigation {
  display: flex;
  gap: 20px;
}

.nav-link {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}
.router-link-exact-active {
        color: #00ADEF;

}

.nav-link:hover {
  color: #00ADEF;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-name {
  color: #333;
  font-size: 16px;
}
</style>
